// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <div id="tabNameAll" class="SupportDetailsList_wrap_PropeIndex6">
            <p class="PropeIndex6_p1">
              <b>{{ HouseDetail.name }}</b>
              <span
                v-html="
                    HouseDetail.saleStatus == 1
                      ? '在售'
                      : HouseDetail.saleStatus == 2
                      ? '售罄'
                      : '待售'
                  "
              >在售</span>
              <span
                style="color: #ef524d; font-weight: bold; font-size: 16px"
                v-if="HouseDetail.totalPrice && HouseDetail.totalPriceMax"
              >
                参考总价：{{ HouseDetail.totalPrice }}万-{{
                HouseDetail.totalPriceMax
                }}万
              </span>

              <span
                style="color: #ef524d; font-weight: bold; font-size: 16px"
                v-else-if="
                    HouseDetail.totalPrice || HouseDetail.totalPriceMax
                  "
              >参考总价：{{ HouseDetail.totalPrice }}万起</span>

              <span style="color: #ef524d; font-weight: bold; font-size: 16px" v-else>参考总价：价格待定</span>
            </p>
            <p class="PropeIndex6_p2">周边配套</p>
            <div class="BmapTipe">
              <div id="container_peitao"></div>
              <div id="resultData">
                <div class="facilMatch">
                  <ul>
                    <li
                      v-for="(item, index) in peitaoTabData"
                      :key="index"
                      @click="handleSelect(index,item.name)"
                    >
                      <img :src="index==peitaoTabIndex?item.iconActive:item.icon" />
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
                <p>附近{{resultsList.length}}个{{this.MapDetection_Code}}</p>
                <div class="matchData">
                  <ul v-if="resultsList.length != 0">
                    <li v-for="(item, index) in resultsList" :key="index">
                      <div class="MoreData_right cursor" @click="getPoint(item)">
                        <span>{{index+1}}、</span>
                        <span>{{ item.title }}</span>
                        <p>{{addressData}}:{{ item.address }}</p>
                      </div>
                    </li>
                  </ul>
                  <ul v-else>暂无数据</ul>
                </div>
              </div>
            </div>
            <div class="contact">
              <div class="fill-row">
                <div class="fill-notice">
                  <div class="fill-notice-price">人均节省看房费用{{ costNum }}元</div>
                  <div class="fill-notice-time">人均节省看房时间{{ timeNum }}分钟</div>
                </div>
                <div class="form-row">
                  <div class="form-inline">
                    <label class="form-label">您的称呼</label>
                    <div class="form-item">
                      <el-radio v-model="sexRadio" label="女士">女士</el-radio>
                      <el-radio v-model="sexRadio" label="先生">先生</el-radio>
                    </div>
                  </div>
                  <div class="form-inline">
                    <label class="form-label">预约看房时间</label>
                    <div class="form-item">
                      <el-date-picker
                        v-model="houseViewingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                      ></el-date-picker>
                    </div>
                  </div>
                  <div class="form-inline">
                    <label class="form-label">您的联系方式</label>
                    <div class="form-item">
                      <el-input
                        type="text"
                        placeholder="请输入您的手机号"
                        v-model="phone"
                        maxlength="11"
                        show-word-limit
                        style="width: 220px"
                      ></el-input>
                    </div>
                  </div>
                  <div class="form-inline" style="margin-bottom: 0">
                    <label class="form-label">&nbsp;</label>
                    <div class="form-item">
                      <el-button
                        type="danger"
                        :disabled="subDisabled"
                        @click="subscribeCar"
                      >预约免费专车看房</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关键区域，街道，周边 -->
      <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 弹窗按钮订阅 -->
    <PopupForm
      :show="popupform.show"
      :title="popupform.title"
      :desc="popupform.desc"
      :cover="popupform.cover"
      :phone="popupform.phone"
      :smsState="popupform.smsState"
      :customTheme="popupform.customTheme"
      :background="popupform.background"
      :contentClass="popupform.contentClass"
      @phoneChange="phoneChange"
      @confirm="returnVisit"
      @cancel="
        popupform.show = false;
        popupform.background = '';
      "
    ></PopupForm>
    <!-- 订阅回调弹窗 -->
    <PopupSuccess
      :show="popupsubscribe.show"
      :cover="popupsubscribe.cover"
      :title="popupsubscribe.title"
      :desc="popupsubscribe.desc"
      @cancel="
        popupsubscribe.show = false;
        subscribeDisabled = false;
      "
    ></PopupSuccess>
  </div>
</template>

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=QD1alOi5Col7B5UU8ad6twt4tU2MEFRi"></script>
<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 5,
      userInfo: '',
      CashBackCode: false, //用户询问
      resultsList: [],
      activeInd_Map: '地铁',
      MapDetection_Code: '地铁',
      sexRadio: '女士',
      phone: '',
      houseViewingDate: '',
      subDisabled: false,
      // 免费看房专车时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      zoom: 15,
      //组件订阅弹窗
      popupsubscribe: {
        show: false, //订阅数据
      },
      customTheme: 0,
      contentClass: '',
      popupform: {
        show: false, //订阅成功数据
        phone: '',
      },
      clickType: '', // 1变价提醒2开盘提醒3咨询剩余房源4订阅楼盘动态5收藏楼盘6户型分析7电话咨询（询购房资格）8询返现9专车看房10咨询返现详情11咨询房贷首付
      subscribeDisabled: false,
      peitaoTabIndex: 0,
      peitaoTabData: [
        {
          name: '地铁',
          icon: '/images/train.png',
          iconActive: '/images/trainSelect.png',
        },
        {
          name: '公交',
          icon: '/images/transit.png',
          iconActive: '/images/transitSelect.png',
        },
        {
          name: '火车站',
          icon: '/images/metro.png',
          iconActive: '/images/metroSelect.png',
        },
        {
          name: '学校',
          icon: '/images/school.png',
          iconActive: '/images/schoolSelect.png',
        },
        {
          name: '医院',
          icon: '/images/hospital.png',
          iconActive: '/images/hospitalSelect.png',
        },
        {
          name: '公园',
          icon: '/images/park.png',
          iconActive: '/images/parkSelect.png',
        },
        {
          name: '购物中心',
          icon: '/images/shop.png',
          iconActive: '/images/shopSelect.png',
        },
      ],
      map: null,
      addressData: '地址',
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl //域名
    var currentCity = ctx.currentCity //城市定位
    var cityList = ctx.cityList //
    var crumbListData = [] //栏目信息
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : ''
    var costNum = 88888
    var timeNum = 88888
    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${estateId}.html`,
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${estateId}.html`,
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${estateId}.html`,
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${estateId}.html`,
      },
      {
        name: '楼盘动态',
        href: `/lpxqdt/${estateId}.html`,
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${estateId}.html`,
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${estateId}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${estateId}.html`,
        aliases: 'wenda',
      },
      {
        name: '免费专车',
        href: `/mfzc/${estateId}.html`,
      },
    ]
    var HouseDetail = [] //楼盘详情数据

    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
        userId: '', //用户ID
      },
    })
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name},楼盘户型，周边配套，交通地图，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `${HouseDetail.name}周边环境怎么样？${HouseDetail.name}周边幼儿园，学校，地铁线路，公交，超市，医院，银行，社区，饭店信息，尽在${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖。`
      head.keywords = `${HouseDetail.name}交通地图,${HouseDetail.name}周边配套`
      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      // 202112071655 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }

      var houseCode = {
        title: `${HouseDetail.name}`,
        href: prefixUrl + ctx.route.path,
      }

      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 看房参数
    let getHouseViewing = await u.http({
      url: '/app/amentOrder/queryShowHouseData',
    })
    if (getHouseViewing.code == 200) {
      costNum = getHouseViewing.data.showingMoney
      timeNum = getHouseViewing.data.showingTime
    }

    return {
      tabList,
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      estateId,
      HouseDetail,
      costNum,
      timeNum,
      regionList: ctx.regionList
    }
  },
  mounted() {
    this.Bmap_sreach()
  },
  methods: {
    getPoint(pointList) {
      var point = new BMapGL.Point(pointList.point.lng, pointList.point.lat)
      this.map.setCenter(point)
      var opts = {
        title: pointList.title, // 信息窗口标题
      }
      var infoWindow = new BMapGL.InfoWindow(
        `${this.addressData}:${pointList.address}`,
        opts
      ) // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point) //开启信息窗口
    },
    handleSelect(index, name) {
      this.peitaoTabIndex = index
      this.MapDetection_Code = name
      this.addressData = this.MapDetection_Code != '公交' ? '地址' : '车次'
      this.Bmap_sreach()
    },
    // 百度地图APi
    Bmap_sreach(pointList) {
      var _this = this
      // 百度地图API功能
      this.map = new BMapGL.Map('container_peitao') // 创建Map实例
      var mPoint = new BMapGL.Point(
        this.HouseDetail.longitude,
        this.HouseDetail.latitude
      )
      this.map.centerAndZoom(mPoint, this.zoom)
      this.map.disableDoubleClickZoom() //禁止缩放
      // map.enableDoubleClickZoom() //启用双击放大，默认启用
      this.map.addControl(new BMapGL.NavigationControl()) //平移缩放控件
      if (pointList) {
        var pointLng = pointList.point.lng
        var pointLat = pointList.point.lat
      }
      //  添加自定义图标
      var opts = {
        position: new BMapGL.Point(
          this.HouseDetail.longitude,
          this.HouseDetail.latitude
        ), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-50, -60), // 设置文本偏移量
      }
      var options = {
        renderOptions: { map: this.map },
        onSearchComplete: function (results) {
          _this.resultsList = []
          _this.resultsList = results._pois
        },
      }

      var pointCode = {
        position: new BMapGL.Point(pointLng, pointLat), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-50, -60), // 设置文本偏移量
      }

      // 创建文本标注对象
      var label = new BMapGL.Label(this.HouseDetail.name, opts)
      var local = new BMapGL.LocalSearch(this.map, options)
      // 自定义文本标注样式
      label.setStyle({
        height: '40px',
        background: '#ff9800',
        borderRadius: '4px',
        textAlign: 'center',
        lineHeight: '40px',
        border: 'none',
        color: '#FFFFFF',
        fontSize: '14px',
        padding: '0 20px',
      })
      this.map.addOverlay(label)
      local.searchInBounds(this.MapDetection_Code, this.map.getBounds(), 2000)
    },
    // 预约专车
    subscribeCar() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/amentOrder/createAmentOrder',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          type: 1,
          amentCall: this.sexRadio,
          phone: localStorage.getItem('userInfo')
            ? JSON.parse(localStorage.getItem('userInfo')).mobile
            : this.phone,
          amentTime: this.houseViewingDate,
          amentHouseName: '',
        },
      }).then((res) => {
        if (res.code == 200) {
          // this.SubscriptionSuessTipe = true;
          this.houseViewingDate = ''
          setTimeout((e) => {
            this.subscribeDisabled = false
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
        }
      })
    },
    // ==========================订阅回访消息==================================
    // 预约
    subscribe(
      title,
      desc,
      cover,
      titleend,
      customTheme,
      background,
      contentClass,
      url
    ) {
      this.popupform.show = true
      this.popupform.title = title
      this.popupform.cover = cover
      this.popupform.smsState = this.smsState
      this.popupform.desc = desc
      if (localStorage.getItem('mobile')) {
        this.popupform.phone = Number(localStorage.getItem('mobile'))
      }
      this.popupsubscribe.title = titleend
      this.popupform.customTheme = customTheme ? Number(customTheme) : 0 //是否为背景验证
      this.popupform.background = background //背景验证背景图
      this.popupform.contentClass = contentClass //活动背景图class样式
      this.popupform.url = url
    },
    // 登录成功回调
    returnVisit() {
      this.popupform.show = false
      this.subscribeDisabled = true
      let url = getCookie('token')
        ? '/app/visitRecord/addVisitRecord'
        : '/app/visitRecord/addVisitRecordByNoToken'
      u.http({
        client: true,
        url,
        headers: {
          token: getCookie('token') || '',
        },
        params: {
          clickType: this.clickType,
          phone: this.popupform.phone,
          estateId: this.estateId,
        },
      }).then((res) => {
        if (this.popupform.url) {
          location.href = this.popupform.url
          return false
        }
        this.popupsubscribe.show = true
      })
    },
    // 监听手机号
    phoneChange(e) {
      this.popupform.phone = e
    },
  },
}
</script>
